<template>
  <div>
    <!--工具类-->

    <Row style="text-align: right">
      <i-col span="24">
        <Button type="info" style="margin-right: 10px" icon="md-hand" @click="showAssignModal" :disabled="!hasSelectItems" v-has=tRole.OPERATIONS_2_104>分配</Button>
        <Button type="warning" style="margin-right: 10px" icon="md-trash" @click="confirmDeleteCustomers" :disabled="!hasSelectItems" v-has=tRole.OPERATIONS_2_105>废弃</Button>
      </i-col>
    </Row>

    <Row style="padding-top: 16px;text-align: left" align="middle" type="flex" v-has=tRole.OPERATIONS_2_101 class="y_query_right">
      <Select placeholder="用户状态" v-model="searchParams.userState" class="modal_newuser_form_input y_condition" clearable>
        <Option v-for="item in targetCustomerStateDict" :value="item.value" :key="item.value">{{ item.name }}</Option>
      </Select>

      <Select placeholder="负责人"  @on-change="changeEmpolyee" ref="selectEmployee"
              class="modal_newuser_form_input y_condition" clearable >
        <Option v-for="item in employeeList" :value="item" :key="item.id" :label="item.userName"></Option>
      </Select>

      <Input v-model.trim="tParam.searchParams.number" placeholder="内部编号" class="modal_newuser_form_input y_condition" clearable/>
      <Input v-model.trim="tParam.searchParams.country" placeholder="国家编码" class="modal_newuser_form_input y_condition" clearable/>
<!--    </Row>-->
<!--    <Row v-has=tRole.OPERATIONS_2_101 style="padding-top: 16px;text-align: left" align="middle" class="y_query_right">-->
      <Input class="modal_newuser_form_input y_condition" v-model.trim="tParam.searchParams.tags" clearable="" placeholder="分类标签" @on-click="showSearchModal(1)" icon="ios-search-outline" >
      </Input>
      <Input class="modal_newuser_form_input y_condition" v-model.trim="tParam.searchParams.otherTags" clearable="" placeholder="内部标签"   @on-click="showSearchModal(9)" icon="ios-search-outline" >
      </Input>

      <Checkbox v-model="tParam.searchParams.isNotAssigned" @on-change="changeAssignCheckbox" class="y_condition">待分配</Checkbox>

      <Checkbox v-model="tParam.searchParams.isHasShop" class="y_condition">有独立站 </Checkbox>
      <Button type="primary" style="margin-left: 16px" icon="md-search" @click="search" class="y_condition">查询</Button>
    </Row>

    <!--表格和分页-->
<!--    <Table stripe border ref="userList" :columns="userTableTitles" :data="userList" @on-selection-change="userSelectedChanged"
            class="table_css" no-data-text="暂无数据" ></Table>-->
    <div style="text-align: left; margin: 1rem 0 0 25px;">
      <Checkbox v-model="selectedAll" :indeterminate="selectedPart" @on-change="clickSelectAll">全选</Checkbox>
    </div>
    <List border class="data-list">
      <template v-if="userList.length == 0">
        <ListItem class="list-item">
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </template>
      <template v-else>
        <CheckboxGroup v-model="selectedIds">
          <ListItem v-for="(item, index) in userList" :key="index" class="list-item">
            <div class="item-top">
              <Checkbox :label="item.id" :disabled="item.state == 310"><span></span></Checkbox>
              <KeyValueView title="独立站编号">
                <a v-if="hasAuthority(tRole.OPERATIONS_2_201)" @click="getCustomerDetail(item.id, item.state)">{{item.number}}</a>
                <span v-else>{{item.number}}</span>
              </KeyValueView>
              <KeyValueView title="独立站" v-if="isNotEmpty(item.externalUrl)">
                <Tooltip :content="item.externalUrl" placement="top">
                  <a target="_blank" :href="item.externalUrl">点击访问</a>
                </Tooltip>
              </KeyValueView>
            </div>
            <div class="item-top">
              <KeyValueView title="站内信地址" v-if="isNotEmpty(item.contactUrl)"><a target="_blank" :href="item.contactUrl">点击访问</a></KeyValueView>
              <KeyValueView title="国家" :value="item.country"></KeyValueView>
              <KeyValueView title="邮箱" :value="isNotEmpty(item.externalEmail)?'有':'无'"></KeyValueView>
              <KeyValueView title="负责员工" :value="item.employeeName"></KeyValueView>
              <KeyValueView title="状态" :value="targetCustomerStateDict.filter(element => element.value == item.state)[0].name"></KeyValueView>
            </div>
          </ListItem>
        </CheckboxGroup>
      </template>
    </List>
    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts=[40,60,80,120]
            show-sizer show-elevator/>
    </div>

    <!--分配员工-->
    <Modal v-model="status.modalAssign.isShow" title="分配负责员工"
           :closable="false" :loading="status.modalAssign.isLoading" @on-ok="assignEmployee()" ok-text="分配">
      <RadioGroup vertical v-model="tParam.selectedEmployee">
        <Radio :label="item" v-for="item in employeeList">
          <Icon type="social-apple"></Icon>
          <span>{{item.userName}}</span>
        </Radio>
      </RadioGroup>

    </Modal>

    <!--推广用户详情弹出框-->
    <Modal v-model="status.modalCustomerInfo.isShow" title="目标用户详情"
           :styles="{top: '20px',bottom:'20px',width:'70%',}" :scrollable=false>
        <Row >
          <i-col span="12">
            <Card style="margin-right: 20px">
              <p slot="title">内部信息</p>
              <div>
                <p><span class="tiy_key">姓名 : </span> {{customerDetail.name}}</p>
                <p><span class="tiy_key">编号 : </span> {{customerDetail.number}}</p>
                <p><span class="tiy_key">状态 :</span> {{customerDetail.stateTitle}}</p>
                <p><span class="tiy_key">负责人 :</span> {{customerDetail.employeeName}}</p>
                <p><span class="tiy_key">站内信地址 :</span> {{customerDetail.contactUrl}}</p>
                <p><span class="tiy_key">扩展邮箱 :</span> {{customerDetail.externalEmail}}</p>
                <p><span class="tiy_key">导入时间 :</span> {{customerDetail.createtime}}</p>
                <p><span class="tiy_key">备注 :</span> {{customerDetail.description}}</p>
              </div>
            </Card>
          </i-col>
          <i-col span="12">
            <Card style="margin-right: 20px;margin-left: 20px;">
              <p slot="title">来源平台信息</p>
              <p><span class="tiy_key">来源 :</span> {{customerDetail.channel}}</p>
              <p><span class="tiy_key">账号 : </span><Avatar :src="customerDetail.avatar" size="large"/> {{customerDetail.name}}</p>
              <p><span class="tiy_key">全名 : </span>{{customerDetail.fullName}}</p>
              <p><span class="tiy_key">粉丝数 : </span>{{customerDetail.followerCount}}</p>
              <p><span class="tiy_key">关注数 :</span>{{customerDetail.followingCount}}</p>
              <p><span class="tiy_key">店铺 :</span><a target="_blank" :href="customerDetail.externalUrl">{{customerDetail.externalUrl}}</a></p>
              <p><span class="tiy_key">邮箱 :</span>{{customerDetail.email}}</p>
            </Card>
          </i-col>
        </Row>
        <Row style="padding-top: 16px"><!--独立站信息-->
          <i-col span="24">
            <Card style="">
              <p slot="title">独立站信息</p>
              <Row style="display:flex"><span class="tiy_key">标题 :</span> <span>{{customerDetail.extendInfo.title}}</span></Row>
              <Row style="display:flex"><span class="tiy_key">描述 :</span> <span >{{customerDetail.extendInfo.siteDesc}}</span></Row>
              <Row><span class="tiy_key">网站排名 :</span> <span>{{customerDetail.extendInfo.alexa}}</span></Row>
              <Row v-if="customerDetail.extendInfo.extra!=''&&customerDetail.extendInfo.extra!=null">
                <span class="tiy_key">网站扩展信息 :</span> <span>{{customerDetail.extendInfo.extra}}</span></Row>

              <Row v-if="customerDetail.extendInfo.facebook!=''&&customerDetail.extendInfo.facebook!=null"><span class="tiy_key">facebook : </span><span>{{customerDetail.extendInfo.facebook}}</span></Row>
              <Row v-if="customerDetail.extendInfo.twitter!=''&&customerDetail.extendInfo.twitter!=null" ><span class="tiy_key">twitter : </span><span>{{customerDetail.extendInfo.twitter}}</span></Row>
              <Row v-if="customerDetail.extendInfo.instagram!=''&&customerDetail.extendInfo.instagram!=null" ><span class="tiy_key">instagram : </span><span>{{customerDetail.extendInfo.instagram}}</span></Row>
              <Row v-if="customerDetail.extendInfo.pinterest!=''&&customerDetail.extendInfo.pinterest!=null" ><span class="tiy_key">pinterest : </span><span>{{customerDetail.extendInfo.pinterest}}</span></Row>
              <Row >
                <span class="tiy_key">网站标签 :</span>
                <Tag color="success" v-for="(tag,index) in customerDetail.readonlyTags" >{{tag}}</Tag>
                <Tag color="primary" v-for="(tag,index) in customerDetail.tags" >{{tag}}</Tag>
                <Tag color="error" v-for="(tag,index) in customerDetail.otherTags" >{{tag}}</Tag>
              </Row>
            </Card>
          </i-col>
        </Row>

        <Row style="padding-top: 16px"><!--联系方式-->
          <i-col span="24">
            <Card style="">
              <p slot="title">联系地址</p>
              <List style="width:100%;">
                <ListItem v-for="(item,index) in customerDetail.contacts" styple="padding-left:4rem">
                  <ListItemMeta >
                    <div slot="title"><span v-text="item.country"></span> <span style="margin-left:2rem" v-text="item.postalCode"></span></div>
                    <div slot="description">
                      <span v-text="'phone: '+item.phone"></span><br/>
                      <span v-text="item.address"></span>
                    </div>
                  </ListItemMeta>
                </ListItem>
              </List>
            </Card>
          </i-col>
        </Row>
        <Row  style="padding-top: 16px"><!--表格和分页-->
          <i-col span="24">
            <Card style="margin-right: 20px;margin-left: 20px;">
            <p slot="title">操作记录</p>
            <Table  stripe border  :columns="recordTable" :data="customerDetail.opRecords" class="table_css"
                     no-data-text="暂无数据" style="margin:0;"></Table>
            </Card>
          </i-col>
        </Row>
    </Modal>

    <Modal v-model="status.modalSearchTag.isShow" title="选择标签"
           :closable="false"  @on-ok="assignSearchTags()" ok-text="确定" :styles="{width:'40%'}" >
      <div v-if="status.modalSearchTag.type==1" >
        <RadioGroup  v-model="status.modalSearchTag.selectedTags">
          <template v-if="status.modalSearchTag.type===1" v-for="categoryTag in customerTags">
            <Radio  v-for="item in categoryTag" :label="item" style="padding: 0.3rem 0.5rem "></Radio><br/>
          </template>
        </RadioGroup>
      </div>
      <div v-if="status.modalSearchTag.type===9" >
        <RadioGroup  v-model="status.modalSearchTag.selectedOtherTags">
          <Radio v-for="item in otherTags" :label="item" style="padding: 0.3rem 0.5rem "></Radio>
        </RadioGroup>
      </div>
    </Modal>


  </div>

</template>

<!--javascript 代码-->
<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/targetCustomer/targetCustomer_data";
  import {
    init,
    searchService,
    getEmployees,
    assignEmployee,
    deleteCustomers,
    getCustomerDetail
  } from "./js/targetCustomer/targetCustomer_funs";
  import KeyValueView from "../widgets/KeyValueView";
  import {isNotEmpty} from "../js/commonUtils";

  export default {
    components: {KeyValueView, ICol},
    data(){
      return {
        tRole: {//权限
          OPERATIONS_2_101: "OPERATIONS-2-101",
          OPERATIONS_2_102: "OPERATIONS-2-102",
          OPERATIONS_2_103: "OPERATIONS-2-103",
          OPERATIONS_2_104: "OPERATIONS-2-104",
          OPERATIONS_2_105: "OPERATIONS-2-105",
          OPERATIONS_2_201: "OPERATIONS-2-201",
        },
        tParam : tiyData.tParams,
        tPage : tiyData.tPage,
        userList : tiyData.tData.userList,
        userTableTitles :tiyData.userTableTitles(this),
        status : tiyData.tStatus,
        //字典 推广客户状态
        targetCustomerStateDict: this.$store.getters.dictionaries.targetCustomerStateDict,
        searchParams : tiyData.tParams.searchParams,
        employeeTableTitles : tiyData.employeeTableTitles(this),
        employeeList : tiyData.tData.employeeList,
        customerDetail : tiyData.tData.customerInfo,
        customerOperationDict : this.$store.getters.dictionaries.customerOperation,
        recordTable:tiyData.recordTable(this),
        customerTags: [["beauty","nails","Hair style","make up tool","Health&Bath","eye lashes"],
            ["女装","女鞋","女包 ","泳衣","内衣和睡衣","运动服","美妆"],
            ["男装","男鞋","男包"],["童装","童鞋","玩具","学习办公用品","亲子装"],
            ["节日用品","礼服婚纱","户外用品"],["饰品","礼品"],
            ["厨房用品","家居收纳","手机配件","宠物用品","健身用品","口罩"],
            ["配饰","配饰-眼镜","配饰-手表"],
            ["食品","药品","手机", "家具","饮料", "咖啡"],
            ["其他不匹配"]],
        otherTags:['站内信长度限制','客户限制推送'],
        selectedIds: [],
        selectedAll: false,
        selectedPart: false,
      }
    },
    computed: {

      hasSelectItems(){
        // return tiyData.tParams.selectedUsers.length>0;
        return this.selectedIds.length > 0;
      }
    },
    methods: {

      search(){
        tiyData.tPage.currentPage = 1;
        this.selectedIds.splice(0);
        searchService(this,tiyData);
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        searchService(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        searchService(this, tiyData);
      },
      userSelectedChanged(selection){
        tiyData.tParams.selectedUsers = selection;
      },

      showAssignModal(){ //显示分配员工对话框
        let self = this;
        tiyData.tParams.selectedUsers.splice(0);
        for(let i=0; i<this.userList.length; i++) {
          let user = this.userList[i];
          if(this.selectedIds.includes(user.id)) {
            tiyData.tParams.selectedUsers.push(user);
          }
        }
        if(tiyData.tParams.selectedUsers.length <= 0){
          this.$Modal.error({
            title: "error",
            content: "请先选择推广客户！"
          });
          return;
        }
        let ret = true;
        let errorMsg = "";
        for(let i = 0; i < tiyData.tParams.selectedUsers.length; i++) {
          let user = tiyData.tParams.selectedUsers[i];
          //只能对未分配且抓取信息的客户进行操作
          if (user.employeeId) {
            ret = false;
            errorMsg = "只能选择未分配给员工的客户！";
            break;
          }
          if (user.state !== 120) {
            ret = false;
            errorMsg = "只能选择已抓取信息的客户！";
            break;
          }
        }
        if(!ret){
          this.$Modal.error({
            title: "error",
            content: errorMsg,
            onOk : function(){
              self.$refs["userList"].selectAll(false);
              self.selectedIds.splice(0);
              tiyData.tParams.selectedUsers = [];
            }
          });
          return;
        }
        tiyData.tStatus.modalAssign.isShow = true;
        // getEmployees(this, tiyData, tiyData.tStatus.modalAssign); //查询员工
      },
      employeeSelectedChanged(currentRow){
        tiyData.tParams.selectedEmployee = currentRow;
      },
      assignEmployee(){
        if(!tiyData.tParams.selectedEmployee.id){
          this.$Modal.error({
            title: "error",
            content: "请选择负责的员工！"
          });
          return;
        }
        assignEmployee(this, tiyData);
      },
      changeEmpolyee(employee){
        if(employee){
          tiyData.tParams.selectedEmployee = employee;
          tiyData.tParams.searchParams.employeeId = employee.id;
          tiyData.tParams.searchParams.employeeName =employee.userName;
        } else {
          tiyData.tParams.selectedEmployee = {};
          tiyData.tParams.searchParams.employeeId = "";
          tiyData.tParams.searchParams.employeeName = "";
        }
      },
      confirmDeleteCustomers(){ //废弃
        let self = this;
        tiyData.tParams.selectedUsers.splice(0);
        for(let i=0; i<this.userList.length; i++) {
          let user = this.userList[i];
          if(this.selectedIds.includes(user.id)) {
            tiyData.tParams.selectedUsers.push(user);
          }
        }
        if(tiyData.tParams.selectedUsers.length <= 0){
          this.$Modal.error({
            title: "error",
            content: "请先选择客户！"
          });
          return;
        }
        this.$Modal.confirm({
          title: "确认操作",
          content: "是否废弃这些客户！",
          onOk: () => {
            deleteCustomers(self, tiyData);
          }
        });
      },
      getCustomerDetail(id, state){
        getCustomerDetail(this, tiyData, id, state);
      },
      changeAssignCheckbox(selected){
        if(selected){ //选中未分配时清空员工下拉框
          this.$refs["selectEmployee"].clearSingleSelect();
        }
      },
        showSearchModal(type){
            tiyData.tStatus.modalSearchTag.type = type;
            tiyData.tStatus.modalSearchTag.isShow = true;
        },
      assignSearchTags(){
          if(tiyData.tStatus.modalSearchTag.type==1){
              tiyData.tParams.searchParams.tags =tiyData.tStatus.modalSearchTag.selectedTags;
          }else if(tiyData.tStatus.modalSearchTag.type==9){
              tiyData.tParams.searchParams.otherTags = tiyData.tStatus.modalSearchTag.selectedOtherTags;
          }
      },
      hasAuthority(code) {
        return this.$authority(code);
      },
      isNotEmpty(val) {
        return isNotEmpty(val);
      },
      clickSelectAll(selected) {
        if(selected) {
          let ids = this.userList.filter(item => item.state != 310).map(item => {return item.id});
          this.selectedIds.splice(0, this.selectedIds.length, ...ids);
        }else{
          this.selectedIds.splice(0);
        }
      },
    },
    created(){
      init(tiyData);
      getEmployees(this, tiyData); //查询员工
    },
    watch: {
      "selectedIds": {
        handler(newVal, oldVal) {
          if(newVal.length > 0) {
            if(newVal.length == this.userList.filter(item => item.state != 310).length) {
              this.selectedAll = true;
              this.selectedPart = false;
            }else{
              this.selectedAll = false;
              this.selectedPart = true;
            }
          }else{
            this.selectedAll = false;
            this.selectedPart = false;
          }
        },
      }
    }
  }
</script>

<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-left: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }

  .data-list {
    margin: 1rem 0rem;
    line-height: 25px;
    .list-item {
      .flex-colum-wrap;
      justify-items: left;
      align-items: start;
      .item-checkbox {
        display: inline-block;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: top;
      }
      .item-img {
        width: 130px;
        text-align: center;
        display: inline-block;
      }
      .item-top{
        width: 100%;
        margin-bottom: 5px;
        .flex-row-wrap;
        justify-content: left;
      }
      .item-content {
        margin-bottom: 35px;
        text-align: left;
      }
      .item-bottom{
        //position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        display: block;
        //padding: 0 1rem 0.5rem 0;
        text-align: right;
        button {
          margin-left: 0.5rem;
        }
      }
    }
  }
</style>
